import React from 'react';
import { createForm } from 'rc-form';
import { district } from 'antd-mobile-demo-data';

import { Grid, Toast } from 'antd-mobile';
import enUs from 'antd-mobile/lib/date-picker/locale/en_US';
import axios from 'axios';

const data1 = Array.from(new Array(9)).map(() => ({
  icon: 'https://gw.alipayobjects.com/zos/rmsportal/WXoqXTHrSnRcUwEaQgXJ.png',
}));

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [],
      isLoaded: false
    };
  }
  componentDidMount() {
    const _this=this;
    this.props.changeTitle('Stage 4');
    axios.get('https://5b5e71c98e9f160014b88cc9.mockapi.io/app/v1/lists')
    .then(function (response) {
      console.log(response.data);
      _this.setState({
        users:response.data,
        isLoaded:true
      });
    })
    .catch(function (error) {
      console.log(error);
      _this.setState({
        isLoaded:false,
        error:error
      })
    })
  }
  render() {
    return (<Grid data={data1}
      columnNum={3}
      renderItem={dataItem => (
        <div onClick={() => Toast.info("不要点了，疯狂暗示")} style={{ padding: '12.5px' }} >
          <img src={dataItem.icon} style={{ width: '75px', height: '75px' }} alt="" />
          <div style={{ color: '#888', fontSize: '14px', marginTop: '12px' }}>
            <span>I am title..</span>
          </div>
        </div>
      )}
    />);
    }
  }


export default createForm()(Demo);
